<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-4.6.0-dist/js/jquery-3.6.0.min.js">
    <link rel="stylesheet" href="bootstrap-4.6.0-dist/js/bootstrap.min.js">
    <link rel="stylesheet" href="other/iconfont.css">
    <title>Document</title>
    <style>
        body{
            background-color: #eee;
        }
        .zjdd{
            height:470px;
        }
        .bgzjdd1{
            background-image: url(pic/apple_pencil__ekq506kmmys2_large_2x.jpg);
            background-repeat: no-repeat;
            background-position:bottom;
            background-size: 100%;
        }
        .bgzjdd2{
            background-image: url(pic/smart_keyboard_folio__b8j0ydqvjq2q_large.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .bgzjdd3{
            background-image: url(pic/accessories__gdpezee1naai_large.jpg);
            background-repeat: no-repeat;
            background-position:bottom;
            background-size: 100%;
        }
        .bgzjdd4{
            background-image: url(pic/ipad_airpods_engraving_update__c7k9a8xo7466_large.jpg);
            background-repeat: no-repeat;
            background-position:bottom;
            background-size: 100%;
        }
        .zjddtext1{
            height: 450px;
        }
        .zdy-wy1{
            top: 20px;
        }
        .zdy-wy2{
            top: 230px;
        }
        .zdy-wy3{
            top: 10px;
        }
    </style>
</head>
<body>
    
    <div class="zdy-iPadzjdd">
        <div class="container">
            <div class="zjddbox">
                <h1 class="text-center  p-5">iPad 绝妙搭档</h1>
                <!-- 第一行内容 -->
                <div class="row bgzjdd">
                    <div class="col-md-6  col-12 zjdd  position-relative ">
                        <div class="zjddtext1 w-100  text-center  bgzjdd1 bg-white">
                            <div class="position-relative  zdy-wy1">
                                <h1>Apple Pencil</h1>
                                <p class="mt-3">款款键盘，保护面面俱到。</p>
                                <a href="#" class="mr-4">进一步了解<i class="bi bi-chevron-right"></i></a>
                                <a href="#">选购<i class="bi bi-chevron-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6  col-12 zjdd  position-relative ">
                        <div class="zjddtext1 w-100  text-center  bg-white bgzjdd2 ">
                            <div class="position-relative pt-5  zdy-wy2">
                                <h1>适用于 iPad 的键盘</h1>
                                <p class="mt-3">款款键盘，保护面面俱到</p>
                                <a href="#" class="mr-4">进一步了解<i class="bi bi-chevron-right"></i></a>
                                <a href="#">选购<i class="bi bi-chevron-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 第二行内容 -->
                <div class="row bgzjdd">
                    <div class="col-md-6  col-12 zjdd  position-relative ">
                        <div class="zjddtext1 w-100  text-center  bgzjdd3 bg-white">
                            <div class="position-relative  zdy-wy1">
                                <h1>配件</h1>
                                <p class="mt-3 m-0">来看看各种保护盖、保护壳以及更多配件</p>
                                <p class="">帮助你尽情发挥 iPad 的精彩。</p>
                                <a href="#">选购 iPad 配件<i class="bi bi-chevron-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6  col-12 zjdd  position-relative ">
                        <div class="zjddtext1 w-100  text-center  bg-white bgzjdd4 ">
                            <div class="position-relative pt-2  zdy-wy3">
                                <h2>特别的一刻，
                                    只属于你。</h2>
                                <p class="mt-3 m-0">AirPods 的镌刻又有新玩法，</p>
                                    <p class="m-0">文字、数字和表情符号现在能混搭，</p>
                                    <p>来试试吧。</p>
                                <a href="#">进一步了解<i class="bi bi-chevron-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>
</html>